import {
  View, Text, Image,
} from 'react-native'
import React from 'react'
import Modal from '@COMPONENTS/modal/Modal'
import { UpdateInfo } from '@TYPES/App'
import EStyleSheet from 'react-native-extended-stylesheet'
import Button from '@COMPONENTS/button/Button'
import Images from '@IMAGE'
import LinearGradientButton from '@COMPONENTS/button/LinearGradient'

interface AppUpdatePopupProps {
  updateInfo: UpdateInfo
  onCancel?: ()=>void
  onConfirm?: ()=>void
  cancelText?: string
  confirmText?: string
}

const AppUpdatePopup: React.FC<AppUpdatePopupProps> = ({
  updateInfo, onCancel, onConfirm, confirmText = '立即更新', cancelText = '暂不更新',
}) => {
  const { UpdateDescription, UpdateTitle: { en: title }, Version } = updateInfo
  return (
    <Modal
      visible
      animationType="fade"
    >
      <View style={styles.container}>
        <View style={styles.top}>
          <Image
            style={styles.updateImage}
            source={Images.common.update}
          />
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.version}>{`v ${Version}`}</Text>
          <Text style={styles.content}>{UpdateDescription?.[0]?.en}</Text>
        </View>
        <View style={styles.bottom}>
          {onCancel && (
            <Button style={styles.leftButton} onPress={onCancel}>
              <Text style={styles.leftText} numberOfLines={1}>
                {cancelText}
              </Text>
            </Button>
          )}
          <View style={styles.rightWrap}>
            <LinearGradientButton style={styles.rightButton} color={['#7CD795', '#6ED58B']} onPress={onConfirm}>
              <Text style={styles.rightText} numberOfLines={1}>
                {confirmText}
              </Text>
            </LinearGradientButton>
          </View>
        </View>
      </View>
    </Modal>
  )
}

export default AppUpdatePopup

const styles = EStyleSheet.create({
  container: {
    width: 295,
    backgroundColor: '$white',
    borderRadius: 12,
    flexDirection: 'column',
    alignItems: 'center',
  },
  top: {
    flexDirection: 'column',
  },
  updateImage: {
    marginTop: 36,
    marginBottom: 16,
    marginHorizontal: 'auto',
    alignSelf: 'center',
  },
  title: {
    color: '$fontColor',
    fontSize: 18,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '500',
    whiteSpace: 'nowrap',
    lineHeight: 25,
    textAlign: 'center',
  },
  version: {
    textAlign: 'center',
    color: '$hint',
    fontSize: 13,
    marginTop: 4,
  },
  content: {
    marginTop: 16,
    fontSize: 13,
    fontFamily: 'PingFangSC-Regular',
    color: '$common',
    textAlign: 'center',
    marginHorizontal: 24,
  },
  bottom: {
    height: 45,
    marginBottom: 24,
    marginTop: 36,
    paddingHorizontal: 16,
    width: '100%',
    flexDirection: 'row',
  },
  rightWrap: {
    flex: 1,
  },
  leftButton: {
    flex: 1,
    marginRight: 23,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
    borderWidth: 0.5,
    borderColor: '#D0D4DB',
  },
  leftText: {
    fontFamily: 'PingFangSC-Regular',
    color: '$fontColor',
    fontSize: 16,
    textAlign: 'center',
  },
  rightButton: {
    height: 45,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
  },
  rightText: {
    fontFamily: 'PingFangSC-Regular',
    color: 'white',
    fontSize: 16,
    textAlign: 'center',
  },
})
